<template>
  <div class="right flex column">
    <div class="top box">
      <div class="box-header">资源统计</div>
      <div class="box-content flex">
        <div class="count-data">
          <div
            class="flex-1 flex"
            v-for="(item, index) in sourceData"
            :key="index"
          >
            <div
              class="padding-30 flex-1"
              v-for="(i, index) in item"
              :key="index"
            >
              <div class="count-box">
                <div class="box-content-data">
                  <div class="data-num">{{ i.count }}</div>
                  <div class="data-txt">{{ i.name }}</div>
                </div>
                <div class="right-top"></div>
                <div class="right-bottom"></div>
                <div class="left-top"></div>
                <div class="left-bottom"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="data flex-1 flex column center">
              <div class="title">物理机</div>
              <div class="count">2个</div>
            </div>
            <div class="data flex-1 flex column center">
              <div class="title">虚拟机</div>
              <div class="count">2个</div>
            </div>
            <div class="data flex-1 flex column center">
              <div class="title">镜像</div>
              <div class="count">2个</div>
            </div> -->
      </div>
    </div>
    <div class="middle box right-box" >
      <div class="box-header">虚拟机趋势图</div>
      <div class="box-content  " >
        <ve-line
        v-if="show"
          :data="chartData"
          :textStyle="text"
           :height="mapHeight"
          :settings="setting"
          :legend="{ itemStyle: { color: '#fff' }, top: 20 }"
        ></ve-line>
        <!-- <v-chart :options="lineData" /> -->

      </div>
    </div>
    <div class="bottom box" >
      <div class="box-header">资源预警</div>
      <div class="box-content ">
        <ve-bar
          :height="'100px'"
          :extend="sex.extend"
          :settings="sex.chartSettings"
          :judge-height="true"
          :data="sex.chartData"
        ></ve-bar>
      </div>
    </div>
  </div>
</template>
<script>
import VeBar from "v-charts/lib/bar.common";

export default {
  components: { VeBar },
  mounted() {
    this.mapHeight =
      document.getElementsByClassName("right-box")[0].clientHeight - 60 + "px";
    console.log(this.mapHeight);
    this.show = true
  },
  data() {
    return {
      mapHeight:'0px',
      show:false,
      setting: {
        area: true,
        yAxis: {
          axisTick: {
            //网格线
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#fff", // y轴字体颜色
            },
          },
        },
      },
      text: {
        color: "#fff",
      },
      sourceData: [
        [
          { name: "CPU 数量", count: 200 },
          { name: "SSH协议", count: 200 },
          { name: "RDP 数量", count: 200 },
        ],
        [
          { name: "HTTPS 数量", count: 200 },
          { name: "SQL", count: 200 },
          { name: "ORACLE 数量", count: 200 },
        ],
      ],
      chartData: {
        columns: ["日期", "访问用户", "下单用户"],
        rows: [
          { 日期: "2018-05-22", 访问用户: 32371, 下单用户: 19810 },
          { 日期: "2018-05-23", 访问用户: 12328, 下单用户: 4398 },
          { 日期: "2018-05-24", 访问用户: 92381, 下单用户: 52910 },
        ],
      },

      sex: {
        extend: {
          color: ["#FCAE00", "#2D7EFD"], //胶囊图的颜色
          legend: {
            itemWidth: 8,
            itemHeight: 8,
            show: true,
            textStyle: {
              color: "#FFFFFF",
            },
            fontSize: 8,
            x: "center", //可设定图例在左、右、居中
            y: "bottom", //可设定图例在上、下、居中
            padding: [0, 0, 15, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          },
          "series.0.itemStyle": {
            normal: {
              barBorderRadius: [10, 0, 0, 10], //两头扁圆形状
            },
          },
          "series.1.itemStyle": {
            normal: {
              barBorderRadius: [0, 10, 10, 0], //两头扁圆形状
            },
          },
          series: {
            barGap: 0,
            symbol: "none",
            smooth: false,
            barWidth: 16,
          },

          grid: {
            top: "5%",
            bootom: "5%",
            left: "10%",
            right: "10%",
            height: "80%",
          },
          xAxis: {
            show: false, //隐藏掉横坐标
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
            },
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            axisLine: {
              show: false, //隐藏掉纵坐标
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "red",
              fontSize: 10,
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#FFFFFF",
                opacity: 0.2,
              },
            },
          },
        },
        chartSettings: {
          stack: {
            得得得: ["成功", "失败"],
          },
        },
        chartData: {
          columns: ["类型", "成功", "失败"],
          rows: [
            {
              类型: "服务请求",
              成功: 393,
              失败: 93,
            },
          ],
        },
      },
    };
  },
};
</script>

<style lang="less" scoped>
.right {
}
</style>